<template>
  <div class="background">
    <div class="container">
      <div class="head">
        <p>{{ yeardate }}</p>
        <h1>区块链数据监控大屏</h1>
        <el-button
          type="primary"
          plain
          style="
            position: fixed;
            right: 14%;
            top: 1%;
            background-color: #040149;
          "
          @click="toback"
          >返回</el-button
        >
      </div>
      <div class="existing">
        <div class="left">
          <div class="backdrop">
            <h3 class="title">每日存证数量</h3>
            <div id="exit"></div>
          </div>
          <div class="backdrop">
            <h3 class="title">业务并发量</h3>
            <div id="business"></div>
          </div>
        </div>
        <div class="center">
          <div id="china"></div>
        </div>
        <div class="right">
          <div class="datas">
            <div class="piece">
              <h3>33,174,278</h3>
              <span>区块高度</span>
            </div>
            <div class="piece">
              <h3>68,309,813</h3>
              <span>存证数量</span>
            </div>
            <div class="piece">
              <h3>5 秒前</h3>
              <span>出块时间</span>
            </div>
            <div class="piece">
              <h3>33,174,278</h3>
              <span>每分钟出块数量</span>
            </div>
          </div>
          <div class="backdrop">
            <h3 class="title">每分钟出块速度</h3>
            <div id="block"></div>
          </div>
        </div>
      </div>
      <div class="evidence">
        <div class="setting">
          <h3 class="title">实时存证</h3>
          <div class="content">
            <div class="table_head">
              <span class="col">序号</span>
              <span class="col">存证HASH</span>
              <span class="col">区块高度</span>
              <span class="col">上链时间</span>
              <span class="icon-dot"></span>
            </div>
            <!-- 区域滚动 -->
            <div class="marquee-view">
              <div class="marquee" ref="marquee">
                <div class="row" v-for="(i, index) in marqueedata" :key="index">
                  <span class="col">{{ i._id }}</span>
                  <span class="col"> {{ i.hash }} </span>
                  <span class="col">{{ i.height }}</span>
                  <span class="col">{{ i.time }}</span>
                  <span class="icon-dot"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="setting">
          <h3 class="title">共识节点状态监控</h3>
          <div class="content">
            <div class="table_head">
              <span class="col">组织名</span>
              <span class="col">机构身份</span>
              <span class="col">节点</span>
              <span class="icon-dot"></span>
            </div>
            <div class="marquee-view">
              <div class="marquee">
                <div class="row" v-for="(i, index) in node" :key="index">
                  <span class="col">{{ i.organization }}</span>
                  <span class="col">{{ i.institution }}</span>
                  <span class="col">{{ i.nodes }}</span>
                  <span class="icon-dot"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script setup>
// import Defer from "@/mixins/Defer";
import "echarts/map/js/china.js";
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
let router = useRouter();
let toback = () => {
  router.back();
};
let data = ref(["4-13", "4-14", "4-15", "4-16", "4-17", "4-18"]);
let data1 = ref([
  ["03:00", 835],
  ["04:00", 2014],
  ["05:00", 2077],
  ["06:00", 957],
  ["07:00", 752],
  ["08:00", 771],
  ["09:00", 1864],
  ["10:00", 2195],
  ["11:00", 1520],
  ["12:00", 520],
]);
let marqueedata = ref([
  {
    _id: 368085,
    hash: "xG2vky7McSXQMpns13UCJUWUquqR4vc1u9bOUgcQ5RUWjVBde0Pa00z1QmBOgNJY",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 214293,
    hash: "Kc89JKjD7U4jPbebauKMYjZty0fxqx4og0GPqnVG16hKuvNSeABgeiWq6GGGWcOZ",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 223629,
    hash: "Zp8InU8fAhI4PminEU6Q2ppSoGetHyjI3XSSM7e4CWQMmGsOfo2jVFIiouJJwrRu",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 515051,
    hash: "LhRJTnKRJr7ut2mQAe0NtsdebUvgd5lD7NQkH9QW43HCu0ZN03qXXwS6CC4MS5ma",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 101617,
    hash: "5AnrFKrmOdqi2rCawoDH5KXVwGDzy3zZAkcldqrMZSwK826CqFCEpkKLh2PkdeEo",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 967889,
    hash: "Y6d6v720K2zy0fNB9OUoClTPzmBc20UX72S83aKJyQHUYkWfnXtm17RODhj",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 875912,
    hash: "uPfjtBY8VkBt27LI4VeQkPehmgU79lg49f46OzImitlM16WLhj72EccBJY14uEo",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 1107011,
    hash: "kK4oNfxzSyMmJYqThaXL1tYGnKrwVY5YOBIcLVdpBSD1agltc4ueROjWKRXR",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 701107,
    hash: "7eH9uY9B1z1nmvPxpnLdETSxxbV7CLKTcdns4tXrcYEHC2NRKAAYU3yMZAoP6",
    height: "33171813",
    time: "2023-4-18",
  },
  {
    _id: 641270,
    hash: "Q2flk5mLtetIbSRY7RPPHdwxWXEo601o8qBOB1Pw8tUUZtCQrBMie89z7ZMq",
    height: "33171813",
    time: "2023-4-18",
  },
]);
let marquee = ref(null);
let node = ref([
  {
    id: 1,
    organization: "depot",
    institution: "区块链",
    nodes: "peer0.scorg",
  },
  {
    id: 2,
    organization: "bmorg",
    institution: "网通法链",
    nodes: "peer0.gxaqor",
  },
  {
    id: 3,
    organization: "waorg",
    institution: "天平链",
    nodes: "peer0.bmgorg,peer1.bmgorg",
  },
  {
    id: 4,
    organization: "txorg",
    institution: "司法链",
    nodes: "peer0.waorg",
  },
  {
    id: 5,
    organization: "ljgzcorg",
    institution: "公证处",
    nodes: "peer0.txorg",
  },
]);
let blockdata = ref([
  ["17:17", 341],
  ["17:18", 177],
  ["17:19", 243],
  ["17:20", 361],
  ["17:21", 275],
  ["17:22", 195],
]);
let time = onMounted(() => {
  window.setInterval(getDate, 1000);
  // location.reload(200000)
  setInterval(() => {
    window.location.reload();
  }, 30000);
  getEcharts();
  certificate();
});
let yeardate = ref();
//时分秒
const getDate = () => {
  let now = new Date();
  let year = now.getFullYear(); // 获取当前年份
  let month = now.getMonth() + 1; // 获取当前月份（注意：月份从0开始，需要加1）
  let day = now.getDate(); // 获取当前日
  let week = now.getDay(); // 获取当前星期几（0表示星期日，1表示星期一，以此类推）
  let hour = now.getHours(); // 获取当前小时数
  let minute = now.getMinutes(); // 获取当前分钟数
  let second = now.getSeconds(); // 获取当前秒数

  // 将星期几转换为中文
  let weekArr = ["日", "一", "二", "三", "四", "五", "六"];
  let weekStr = "星期" + weekArr[week];

  let dates =
    year +
    "年" +
    month +
    "月" +
    day +
    "日 " +
    hour +
    ":" +
    minute +
    ":" +
    second +
    " " +
    weekStr;
  // 输出结果
  yeardate.value = dates;
  return dates;
};

//每日存证数量
const existing = () => {
  let myChart = echarts.getInstanceByDom(document.getElementById("exit"));
  if (myChart == null) {
    myChart = echarts.init(document.getElementById("exit"));
  }
  let now = new Date();
  let month = now.getMonth() + 1; // 获取当前月份（注意：月份从0开始，需要加1）
  let day = now.getDate(); // 获取当前日
  let data = [];
  for (let i = 5; i >= 0; i--) {
    // year =
    data.push(month + "-" + (day - i));
  }
  //配置图表
  // #1F71DD
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      data: data,
      axisLine: {
        //x轴坐标轴，false为隐藏，true为显示
        show: false,
      },
      axisLabel: {
        color: "#1F71DD",
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false, //不显示坐标轴轴线
      },
      axisTick: {
        show: false, //不显示坐标轴刻度
      },
      axisLabel: {
        //y轴文字的配置
        color: "#1F71DD", //Y轴内容文字颜色
      },
      splitLine: {
        lineStyle: {
          // type: "dashed", //虚线
          color: "#1F71DD",
        },
        show: true, //隐藏
      },
    },
    grid: {
      show: false,
      left: "3%",
      top: "10%",
      backgroundColor: "#0C1042",
      borderColor: "rgba(96, 67, 67, 1)",
      containLabel: true,
      width: "420",
      height: "160",
    },
    series: [
      {
        data: [1823, 1450, 1324, 1027, 1634, 3000],
        type: "bar",
        color: "#1F71DD",
        width: "60",
        barWidth: 30, //柱图宽度
      },
    ],
  };
  myChart.setOption(option);
};

//业务并发量
const business = () => {
  let myChart = echarts.getInstanceByDom(document.getElementById("business"));
  if (myChart == null) {
    myChart = echarts.init(document.getElementById("business"));
  }

  let now = new Date();
  let hour = now.getHours(); // 获取当前小时数
  let data = [];
  for (let i = 9; i >= 0; i--) {
    let phoneCode = Math.ceil(Math.random() * 1000);
    data.push([hour - i + ":00", phoneCode]);
  }
  const dateList = data.map(function (item) {
    return item[0];
  });
  const valueList = data.map(function (item) {
    return item[1];
  });
  const option = {
    // Make gradient line here
    visualMap: {
      show: false,
      type: "continuous",
      seriesIndex: 0,
      min: 0,
      max: 400,
    },
    tooltip: {
      trigger: "axis",
      borderColor: "#00AEFF",
      borderWidth: 2,
      backgroundColor: "#05042C", //tooltip背景色
      formatter: function (param) {
        // console.log(param);
        //自定义tooltip内容
        var text = "";
        text +=
          '<div style="display:flex;flex-direction:row;background-color:#0B1839;">' +
          '<div style="display:flex;flex-direction:column;">' +
          "<span style='color:white'>" +
          param[0].value +
          "</span>";
        ("</div>");
        ("</div>");
        return text;
      },
    },
    xAxis: {
      data: dateList,
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#2A2D58",
        },
      },
      axisLabel: {
        //y轴文字的配置
        interval: 0, //使x轴文字显示全
        color: "#A8CBDD", //Y轴内容文字颜色
      },
    },
    yAxis: {
      axisLabel: {
        //y轴文字的配置
        color: "#A8CBDD", //Y轴内容文字颜色
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#2A2D58",
        },
      },
    },
    grid: {
      show: true,
      left: "5%",
      top: "15%",
      backgroundColor: "#0C1042",
      borderColor: "#2A2D58",
      containLabel: true,
      width: "420",
      height: "160",
      tooltip: {
        axisPointer: {
          type: "cross",
        },
      },
    },
    series: [
      {
        type: "line",
        showSymbol: false,
        data: valueList,
        color: "#00AEFF",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#224676", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(8,12,58,0.2)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
        },
        itemStyle: {
          normal: {
            color: "#F29C1B",
            lineStyle: {
              color: "#00AEFF",
            },
          },
        },
        animation: true,
      },
    ],
  };
  myChart.setOption(option);
};

//每分钟出块速度
const block = () => {
  let myChart = echarts.getInstanceByDom(document.getElementById("block"));
  if (myChart == null) {
    myChart = echarts.init(document.getElementById("block"));
  }

  let now = new Date();
  let hour = now.getHours(); // 获取当前小时数
  let minute = now.getMinutes(); // 获取当前分钟数
  let data = [];
  for (let i = minute; i >= 0; i--) {
    let phoneCode = Math.ceil(Math.random() * 500);
    data.push([hour + ":" + (minute - i), phoneCode]);
  }
  const dateList = data.map(function (item) {
    return item[0];
  });
  const valueList = data.map(function (item) {
    return item[1];
  });
  const option = {
    // Make gradient line here
    visualMap: {
      show: false,
      type: "continuous",
      seriesIndex: 0,
      min: 0,
      max: 400,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      borderColor: "#00AEFF",
      borderWidth: 2,
      backgroundColor: "#05042C", //tooltip背景色
      formatter: function (param) {
        //自定义tooltip内容
        var text = "";
        text +=
          '<div style="display:flex;flex-direction:row;background-color:#0B1839;">' +
          '<div style="display:flex;flex-direction:column;">' +
          "<span style='color:white'>" +
          "时间：" +
          param[0].axisValue +
          "</span>" +
          "<span style='color:white'>" +
          "速度：" +
          param[0].value +
          "</span>";
        ("</div>");
        ("</div>");
        return text;
      },
    },
    xAxis: {
      data: dateList,
      axisLine: {
        //x轴坐标轴，false为隐藏，true为显示
        show: false,
      },
      axisLabel: {
        color: "#1F71DD",
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false, //不显示坐标轴轴线
      },
      axisTick: {
        show: false, //不显示坐标轴刻度
      },
      axisLabel: {
        //y轴文字的配置
        color: "#1F71DD", //Y轴内容文字颜色
      },
      splitLine: {
        lineStyle: {
          // type: "dashed", //虚线
          color: "#1F71DD",
        },
        show: true, //隐藏
      },
    },
    grid: {
      show: false,
      left: "5%",
      top: "15%",
      backgroundColor: "#0C1042",
      borderColor: "#2A2D58",
      containLabel: true,
      width: "420",
      height: "160",
      tooltip: {
        axisPointer: {
          type: "cross",
        },
      },
    },
    series: [
      {
        type: "line",
        showSymbol: true,
        data: valueList,
        symbol: "circle", //将小圆点改成实心 不写symbol默认空心
        symbolSize: 7, //小圆点的大小
        color: "#00AEFF",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(35,131,192,1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(35,131,192,0.1)", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
        },
        itemStyle: {
          normal: {
            color: "green",
            lineStyle: {
              color: "#00AEFF",
            },
          },
        },
        animation: true,
      },
    ],
  };
  myChart.setOption(option);
};

//实时存证
const certificate = () => {
  // console.log();
  const el = $(marquee.value);
  const h = el.height();
  el.css("transform", "translateY(0)");
  if (!el.attr("data-height")) {
    const childs = el.children().clone();
    el.append(childs);
  }
  setTimeout(() => {
    el.css("transform", "translateY(" + -h + "px)");
  });
  el.on("webkitTransitionEnd", () => {
    el.css({
      transition: "none",
      transform: "translateY(0)",
    });

    setTimeout(() => {
      el.css({
        transition: "",
        transform: "translateY(" + -h + "px)",
      });
    });
  });
};

//made in china
// 地图
const mapCharts = async () => {
  let myChart = echarts.getInstanceByDom(document.getElementById("china"));
  if (myChart == null) {
    myChart = echarts.init(document.getElementById("china"));
  }
  const {
    data: { result },
  } = await axios.get("http://fe-smartboard-web.itheima.net/api/device"); // 获取值
  var chianMap = {
    //地图坐标
    黑龙江: [127.9688, 45.368],
    内蒙古: [110.3467, 41.4899],
    吉林: [125.8154, 44.2584],
    北京市: [116.4551, 40.2539],
    辽宁: [123.1238, 42.1216],
    河北: [114.4995, 38.1006],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    陕西: [109.1162, 34.2004],
    甘肃: [103.5901, 36.3043],
    宁夏: [106.3586, 38.1775],
    青海: [101.4038, 36.8207],
    新疆: [87.9236, 43.5883],
    西藏: [91.11, 29.97],
    四川: [103.9526, 30.7617],
    重庆: [108.384366, 30.439702],
    山东: [117.1582, 36.8701],
    河南: [113.4668, 34.6234],
    江苏: [118.8062, 31.9208],
    安徽: [117.29, 32.0581],
    湖北: [114.3896, 30.6628],
    浙江: [119.5313, 29.8773],
    福建: [119.4543, 25.9222],
    江西: [116.0046, 28.6633],
    湖南: [113.0823, 28.2568],
    贵州: [106.6992, 26.7682],
    云南: [102.9199, 25.4663],
    广东: [113.12244, 23.009505],
    广西: [108.479, 23.1152],
    海南: [110.3893, 19.8516],
    上海: [121.4648, 31.2891],
  };

  const convertData = (data) => {
    const res = [];
    for (let i = 0; i < data.length; i++) {
      let dataItem = data[i];
      let fromCoord = chianMap[dataItem[0].name];
      let toCoord = [116.4551, 40.2539];
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: fromCoord,
            value: dataItem[0].value,
          },
          {
            coord: toCoord,
          },
        ]);
      }
    }
    return res;
  };

  const series = [
    {
      type: "lines",
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //指向速度，值越小速度越快
        symbol: "arrow", //箭头图标
        symbolSize: 3, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //线条宽度
          opacity: 0.01, //线条透明度
          curveness: 0.4, //线条曲直度
        },
      },
      data: convertData(result),
    },
    {
      type: "effectScatter",
      coordinateSystem: "geo",
      zlevel: 2,
      rippleEffect: {
        brushType: "stroke",
      },
      label: {
        normal: {
          show: true,
          position: "right",
          formatter: "{b}",
        },
      },
      symbolSize: function (val) {
        return 2 + val[2] / 2000; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: "#f00",
        },
      },
      data: result.map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chianMap[dataItem[0].name].concat([dataItem[0].value]),
        };
      }),
    },
    {
      type: "scatter",
      coordinateSystem: "geo",
      zlevel: 2,
      rippleEffect: {
        period: 4,
        brushType: "stroke",
        scale: 4,
      },
      label: {
        normal: {
          show: true,
          position: "right",
          color: "#f00",
          formatter: "{b}",
          textStyle: {
            color: "#0ff",
          },
        },
        emphasis: {
          show: true,
        },
      },
      symbol: "pin",
      symbolSize: 30,
      itemStyle: {
        normal: {
          show: true,
          color: "#0ff",
        },
      },
      data: [
        {
          name: "北京市",
          value: chianMap["北京市"],
        },
      ],
    },
  ];
  let option = {
    visualMap: {
      //图例值控制
      min: 0,
      max: 10000,
      itemHeight: 100,
      calculable: true,
      color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
      show: true,
      textStyle: {
        color: "#fff",
      },
    },
    geo: {
      type: "map",
      map: "china",
      zoom: 1.2,
      label: {
        emphasis: {
          show: false,
        },
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: "#0d172c",
          borderColor: "#3c81b2",
          borderWidth: 1,
        },
      },
    },
    series: series,
  };
  myChart.setOption(option);
};

//执行方法
const getEcharts = () => {
  setTimeout(() => {
    existing();
  }, 300);
  setTimeout(() => {
    business();
  }, 300);
  setTimeout(() => {
    mapCharts();
  }, 300);
  setTimeout(() => {
    block();
  }, 300);
};
</script>
    
<style scoped lang='less'>
h3 {
  font-weight: normal;
}
.background {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
  background: url("../../assets/大屏/u523.png") no-repeat center top;
  background-size: 100% 100%;
  // height: 100vh;
  .container {
    margin: 0 auto;
    min-height: 700px;
    min-width: 1300px;
    max-width: 1920px;
    padding: 88px  20px  20px  20px;
  }
  .head {
    background: url("../../assets/大屏/u720.png") no-repeat center center;
    background-size: 100%;
    height: 100px;
    overflow: hidden;
    color: white;
    h1 {
      text-align: center;
      color: white;
      line-height: 100px;
    }
    p {
      position: absolute;
      color: #00aeff;
      left: 100px;
      line-height: 55px;
      font-size: 12px;
    }
  }
  .existing {
    display: flex;
    justify-content: space-around;
    #china {
      width: 500px;
      height: 80%;
    }
    .datas {
      height: 220px;
      width: 480px;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .piece {
        width: 200px;
        height: 100px;
        background-color: red;
        -webkit-filter: brightness(150%);
        filter: brightness(150%);
        cursor: pointer;
        background: url("../../assets/大屏/u530.png") no-repeat center center;
        h3 {
          color: #00feff;
          text-align: center;
          height: 40px;
          margin-top: 15px;
          margin-bottom: 10px;
        }
        span {
          color: white;
          display: block;
          text-align: center;
        }
      }
      .piece:hover {
        -webkit-filter: brightness(200%);
        filter: brightness(200%);
        h3 {
          margin-top: -5px;
          font-size: 26px;
          margin-bottom: 30px;
        }
        span {
          display: block;
        }
      }
    }
    .backdrop {
      background: url("../../assets/大屏/u526.png") no-repeat center center;
      background-size: 100% 100%;
      height: 220px;
      width: 480px;
      margin-bottom: 30px;
      // filter: drop-shadow(0 0 15px #0055ff);
      .title {
        color: white;
        font-size: 16px;
        margin-left: 50px;
      }
      #exit {
        width: 500px;
        height: 240px;
        padding: 10px;
      }
      #business {
        width: 480px;
        height: 220px;
      }
      #block {
        width: 480px;
        height: 220px;
      }
    }
  }
  .evidence {
    display: flex;
    justify-content: space-around;
    .setting {
      background: url("../../assets/大屏/u526.png") no-repeat center center;
      background-size: 100% 100%;
      height: 200px;
      width: 700px;
      margin-bottom: 25px;
      color: white;
      display: flex;
      flex-direction: column;
      .content {
        flex: 1;
        position: relative;
      }
      .table_head,
      .row {
        display: flex;
        justify-content: space-between;
        line-height: 1;

        .icon-dot {
          display: none;
          position: absolute;
          left: 0.64rem;
        }
      }

      .table_head {
        font-size: 0.583rem;
        padding: 10px 15px;
        color: #68d8fe;
        text-align: center;
        background-color: #2c369b;
        width: 93%;
        margin: 20px auto;
      }

      .marquee-view {
        width: 100%;
        position: absolute;
        top: 55px;
        bottom: 0;
        overflow: hidden;
        font-size: 12px;
      }

      .marquee {
        transition: transform 30s linear;
      }

      .row {
        padding: 0.458rem 1.5rem;
        text-align: center;
        color: white;
        cursor: pointer;
        position: relative;

        &:hover {
          color: #68d8fe;
          background-color: rgba(255, 255, 255, 0.1);

          .icon-dot {
            display: block;
          }
        }
      }

      .col {
        display: block;

        &:nth-child(1) {
          width: 3.8rem;
        }

        &:nth-child(2) {
          width: 8.4rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        &:nth-child(3) {
          width: 160px;
        }
      }
      .title {
        color: white;
        font-size: 16px;
        margin-left: 68px;
      }
    }
  }
}
</style>